<template>
	<view class="main">
		<u--form labelPosition="left" :model="formData" ref="form1">
			<view class="module">
				<view class="module-flie">
					<view class="module-flie-title">图片上传</view>

					<view class="module-flie-card">
						<uploadFile :fileList1="fileList1" :limit="9" @getImg="getImg" />
					</view>
				</view>
				<u-form-item label="名称" prop="name" labelWidth="80" required borderBottom ref="item1">
					<u--input v-model="formData.name" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="品类" prop="category" labelWidth="80" required borderBottom ref="item1">
					<u--input v-model="formData.category" placeholder="请选择"border="none"></u--input>
				</u-form-item>
				<!-- <u-form-item label="品类" prop="category" labelWidth="80" required borderBottom
					@click="showPop('category',userList); hideKeyboard()" ref="item1">
					<u--input v-if="!formData.categoryName" v-model="formData.categoryName" disabledColor="#ffffff"
						placeholder="请选择" border="none"></u--input>
					<span class="selectText" v-if="formData.categoryName&&item.name==formData.categoryName"
						v-for="item in userList">{{item.name}}</span>
					<u-icon slot="right" name="arrow-right" color="#d7d7d7"></u-icon>

				</u-form-item> -->

				<u-form-item label="重量" prop="weight" labelWidth="80" required borderBottom ref="item1">
					<u--input v-model="formData.weight" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="单价" prop="unitPrice" labelWidth="80" required borderBottom ref="item1">
					<u--input v-model="formData.unitPrice" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="数量" prop="num" labelWidth="80" required borderBottom ref="item1">
					<u--input v-model="formData.num" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="总价" prop="totalPrice" labelWidth="80" required borderBottom ref="item1">
					<u--input v-model="formData.totalPrice" border="none" placeholder="请输入"></u--input>
				</u-form-item>
				<u-form-item label="备注" prop="remark" labelWidth="80" :borderBottom="false" ref="item1">
					<u--input v-model="formData.remark" border="none" placeholder="请输入"></u--input>
				</u-form-item>
			</view>
		</u--form>

		<!--底部按钮-satrt-->
		<view class="btn">
			<view class="btn-item" @click="submit">提交</view>
		</view>
		<!--底部按钮-end-->


		<u-action-sheet :show="isShowPop" :actions="actions" title="请选择" @close="isShowPop = false"
			@select="popSelect"></u-action-sheet>
	</view>
</template>

<script>
	import db from '@/common/localstorage.js'

	export default {

		onLoad(options) {
			this.formData.sourceId = options.id
			this.formData.type = options.type
			this.formData.source = options.name
		},

		data() {
			return {
				isShowPop: false,
				popType: '',
				userList: [],
				userInfo: {},
				fileList1: [],
				actions:[],

				formData: {
					name: '',
					weight: '',
					unitPrice: '',
					num: '',
					totalPrice: ''
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['change']
					},
					weight: {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['change']
					},
					unitPrice: {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['change']
					},
					num: {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['change']
					},
					totalPrice: {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['change']
					},
					category: {
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['change']
					},
				},

			}
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			this.$refs.form1.setRules(this.rules)
		},
		methods: {

			getImg(val) {
				this.fileList1 = val
			},
			showPop(type, list) {
				this.actions = list
				this.popType = type
				this.isShowPop = true
			},
			popSelect(e) {
				this.isRe = false
				this.formData[this.popType] = e.name

				if (this.popType == 'projMajManagerName') {
					this.formData.projMajManagerId = e.value
				}
				if (this.popType == 'projDpkManagerName') {
					this.formData.projDpkManagerId = e.value
					this.formData.deptId = e.deptId
				}

				console.log(this.formData)
				this.$refs.form1.validateField(this.popType)
				this.isRe = true
			},

			submit() {
				let that = this
				if( !this.fileList1.length){
					uni.$u.toast('请上传图片')
					return
				}

				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				this.$refs.form1.validate().then(res => {
					this.formData.imges = this.fileList1.map(o => {
						return o.url
					}).join(',')
					uni.showLoading({
						title: '提交中'
					});
					that.$postjson('/api/RqOffer/add', that.formData).then(res => {
						uni.hideLoading()
						if (res.data.code == 200) {
							setTimeout(v => {
								uni.navigateBack()
							}, 1000)
							uni.$u.toast('操作成功')
						} else {
							uni.$u.toast(res.data.msg)
						}
					})
				}).catch(errors => {
					console.log(errors)
					uni.$u.toast('请完善表单')
				})
			},



		},
	}
</script>

<style lang="scss" scoped>
	page {
		background: #F3F3F5;
	}

	.btn {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 118rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 0rpx 0rpx rgba(0, 0, 0, 0.06);
		padding-bottom: 68rpx;
		padding-left: 30upx;
		padding-right: 30upx;
		padding-top: 30upx;
		width: calc(100% - 60upx);

		.btn-item {
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			width: 552rpx;
			height: 88rpx;
			background: linear-gradient(138deg, #12C66B 0%, #11AA66 100%);
			border-radius: 44rpx;
			margin: auto;
			line-height: 88upx;
		}
	}

	.main {
		// margin-top: 24upx;
		padding: 0 32upx;
		background: #fff;
		padding-bottom: 250upx;

		::v-deep .u-form-item__body {
			// padding: 16upx 0 !important;
		}

		.module {
			background: #fff;
			padding: 20upx;

			.module-flie {
				.module-flie-title {
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #111111;
					position: relative;
					width: 100%;
					margin-bottom: 30upx;
				}

				.module-flie-title::after {
					content: '';
					width: 8rpx;
					height: 28rpx;
					background: linear-gradient(180deg, #11AA66 0%, #12C66B 100%);
					position: absolute;
					left: -20upx;
					bottom: 8upx;

				}

				.module-flie-card {
					.flie-inner {
						width: 200rpx;
						height: 190rpx;
						background: #F4F4F5;
						border-radius: 16rpx;
						border: 1rpx solid #DDDDDD;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 24rpx;
						color: #11AA66;

					}

					.flie-inner-img {
						width: 44upx;
						height: 42upx;
						margin-bottom: 30upx;
					}
				}

			}

			::v-deep .u-form-item__body {
				padding: 32upx 0 !important;
			}

			::v-deep .u-form-item__body__left__content__required {
				// left: auto !important;
				// right: 3px !important;
				font-size: 32upx;
				margin-top: -2px;
			}

			::v-deep .u-form-item__body__right {
				padding-left: 20upx;
			}

			::v-deep .u-form-item__body__left__content__label {
				font-size: 32upx;
			}


			::v-deep .u-border {
				border: none;
			}

			::v-deep .u-textarea__field {
				min-height: 24px;
			}

			::v-deep .uni-textarea-textarea {
				font-size: 32upx;
			}


			::v-deep .u-textarea {
				padding: 0;
			}

			::v-deep .uni-textarea-placeholder {
				color: rgb(192, 196, 204) !important;
				font-weight: 400;
				font-size: 28upx;
			}

			.topClass {
				::v-deep .u-form-item__body {
					flex-direction: column !important;

					.u-form-item__body__right {
						padding-left: 0px;
					}
				}
			}

		}


	}


	.selectText {
		font-size: 32upx;
	}
</style>